import { createBrowserRouter, Navigate } from "react-router-dom";
import { lazy, Suspense, FC, } from "react";
import Home from "@/Views/Home";
import App from "@/App";
import Login from "@/Views/Login";
import Error from "@/Views/404";
const About = lazy(() => import("@/Views/About"));
const Test = lazy(() => import("@/Views/Test"));


const lazyComponent = (Component: FC) => {

    return <Suspense fallback={<div>Loading...</div>}>
        <Component />
    </Suspense>
}
const routers = [
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    {
        path: "/",
        element: <App />,
        children: [
            {
                path: "/home",
                element: lazyComponent(Home),
            },
            {
                path: "/about",
                element: lazyComponent(About),
            }, {
                path: "/test",
                element: lazyComponent(Test),
            }
        ]
    },

    {
        path: "/login",
        element: <Login></Login>

    },
    {
        path: "*",
        element: <Error></Error>
    }
]

const route = createBrowserRouter(routers)

export default route;